<template>
  <div class="constellation-choose">
    <nav-back />
    <div class="cons-list">
      <div
        v-for="(v,i) in list"
        :key="i"
        class="cons-item"
        @click="setConsCode(i)"
      >
        <i class="icon" :style="{backgroundImage:`url('${v.icon}')`}"></i>
        <span class="text">{{v.text}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex'
import { getConsObj } from '@/tools'
import { NavBack } from '@/components'

export default {
  name: 'constellation-choose',
  components: { NavBack },
  data: () => ({
    list: []
  }),
  computed: {
    ...mapState('User', ['isLogin'])
  },
  methods: {
    ...mapMutations('User', ['setState']),
    ...mapActions('User', ['updateUser']),
    ...mapActions('Toast', ['addToast']),
    setConsCode(code) {
      if (this.isLogin) {
        this.updateUser({ conscode: code }).then(() => {
          this.addToast({ content: `星座切换为"${getConsObj(code).text}"` })
          this.$router.go(-1)
        })
      } else {
        this.setState({ conscode: code })
        this.addToast({ content: `星座切换为"${getConsObj(code).text}"` })
        this.$router.go(-1)
      }
    }
  },
  mounted() {
    let list = []
    for (let i = 0; i < 12; i++) {
      const obj = getConsObj(i)
      list.push({ icon: obj.icon, text: obj.text })
    }
    this.list = list
  }
}
</script>

<style lang="stylus">
$icon-size = 50px;

.constellation-choose {
  background-color: #fff;

  .cons-list {
    display: flex;
    flex-wrap: wrap;

    .cons-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 33.33%;
      margin: 20px 0;

      >.icon {
        width: $icon-size;
        height: $icon-size;
        background: center / cover no-repeat;
      }
    }
  }
}
</style>
